<template>
  <div id="screen-wrap">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'ScreenWraps',
  data() {
    return {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight
    }
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        setTimeout(() => {
          this.resetDashboard()
          this.timer = false
        }, 500)
      }
    },
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        setTimeout(() => {
          this.resetDashboard()
          this.timer = false
        }, 500)
      }
    }
  },
  mounted() {
     const herf = (window.location.href).split('=')
     const type = Number(herf[1])
     if (type !== 1) {
      const that = this
      this.setScreenWidth()
      this.resetDashboard()
      window.onresize = () => {
        return that.setScreenWidth()
      }
    }
  },
  methods: {
    resetDashboard() {
      document.getElementById('screen-wrap').style.transform = `scale(${this.screenWidth / 3613},${this.screenHeight /
        1032})`
    },
    setScreenWidth() {
      window.screenWidth = document.body.clientWidth
      window.screenHeight = document.body.clientHeight
      this.screenWidth = window.screenWidth
      this.screenHeight = window.screenHeight
    }
  }
}
</script>
<style lang="less" scopde>
#screen-wrap {
  width:3613px;
  height: 1032px;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}
</style>
